{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Message ===== -->
<div class="alert alert-warning alert-dismissible fade show shadow-sm text-center mt-3 mx-3" role="alert">
  <strong><i class="bi bi-info-circle"></i> If both offers are applicable, only the first one will be applied!</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- ===== Offers Section ===== -->
<section class="offers-section py-5">
  <div class="container">
    <h1 class="text-center fw-bold text-success mb-5">
      <i class="bi bi-gift-fill"></i> Special Offers
    </h1>

    <!-- Offer 1 -->
    <div class="row align-items-center mb-5 offer-card">
      <div class="col-md-6 text-center text-md-start">
        <h2 class="fw-bold text-dark">🏏 Book More, Pay Less</h2>
        <p class="lead text-muted mt-3">
          Make a booking for more than <strong>5 hours</strong> and get a flat discount of <strong>₹300</strong> on your total bill.
        </p>
        <a href="/booking" class="btn btn-success mt-3 px-4 rounded-pill shadow-sm">
          <i class="bi bi-calendar-check"></i> Book Now
        </a>
      </div>
      <div class="col-md-6 text-center">
        <img src="static/cric_1.png" alt="Cricket Offer" class="img-fluid rounded-4 shadow-sm offer-image">
      </div>
    </div>

    <!-- Offer 2 -->
    <div class="row align-items-center flex-md-row-reverse offer-card">
      <div class="col-md-6 text-center text-md-start">
        <h2 class="fw-bold text-dark">⚽ Consistency is the Key</h2>
        <p class="lead text-muted mt-3">
          For every <strong>5th booking</strong>, you’ll receive an exclusive <strong>10% discount</strong> on your total amount!
        </p>
        <a href="/booking" class="btn btn-outline-success mt-3 px-4 rounded-pill shadow-sm">
          <i class="bi bi-trophy-fill"></i> Start Booking
        </a>
      </div>
      <div class="col-md-6 text-center">
        <img src="static/football_1.png" alt="Football Offer" class="img-fluid rounded-4 shadow-sm offer-image">
      </div>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #f8fff8, #ffffff);
  }

  .offers-section {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .offer-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    margin-bottom: 60px;
  }

  .offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }

  .offer-image {
    max-height: 260px;
    object-fit: contain;
  }

  .btn-success, .btn-outline-success {
    font-weight: 600;
    font-size: 1.05rem;
  }

  .btn-outline-success:hover {
    background-color: #28a745;
    color: #fff;
  }

  @media (max-width: 768px) {
    .offer-card {
      text-align: center;
    }
    .offer-image {
      margin-top: 20px;
    }
  }
</style>

{% endblock body %}